<template>
  <div class="wrapper">
    <!-- 头部区域 -->
    <div class="header-section">
      <h1 class="login-title">东软环保公众监督系统</h1>
      <p class="welcome-text" >登录</p>
    </div>

    <!-- 登录表单 -->
    <section class="login-card">
      <div class="card-body">
        <!-- 输入框区域 -->
        <div class="input-group">
          <span class="input-icon">
            <i class="fa fa-phone"></i>
          </span>
          <input
              type="text"
              v-model="supervisorForm.telId"
              placeholder="电话"
              class="form-input"
          />
        </div>

        <div class="input-group">
          <span class="input-icon">
            <i class="fa fa-lock"></i>
          </span>
          <input
              type="password"
              v-model="supervisorForm.password"
              placeholder="密码"
              class="form-input"
          />
        </div>

        <!-- 记住密码 & 忘记密码 -->
        <div class="remember-row">
          <label class="remember-label">
            <input type="checkbox" v-model="rememberPassword" /> 记住密码
          </label>
          <a href="#" class="forgot-link" @click="handleForgot">忘记密码？</a>
        </div>

        <!-- 登录按钮 -->
        <button class="login-btn" @click="login">
          登录
        </button>

        <!-- 注册引导 -->
        <div class="register-guide">
          还没有账号？<router-link to="/register" class="router-link">注册</router-link>
        </div>
      </div>
    </section>

    <!-- 环保知识小百科悬浮按钮 -->
    <div
        class="eco-knowledge-btn"
        @click="openEcoKnowledge"
    >
      <i class="fa fa-leaf"></i> 环保知识
    </div>

    <!-- 环保知识弹窗 -->
    <div v-if="showEcoKnowledge" class="eco-modal">
      <div class="modal-overlay" @click="showEcoKnowledge = false"></div>
      <div class="modal-content">
        <div class="modal-header">
          <h3>环保知识小百科</h3>
          <button class="close-btn" @click="showEcoKnowledge = false">
            <i class="fa fa-times"></i>
          </button>
        </div>
        <div class="modal-body">
          <!-- 随机显示的环保小知识 -->
          <div class="knowledge-item" v-for="(item, index) in currentKnowledgeItems" :key="index">
            <h4>{{ item.title }}</h4>
            <p>{{ item.content }}</p>
          </div>

          <!-- 底部提示 -->
          <div class="tip-text">
            <p>点击悬浮按钮可查看更多环保知识</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref, inject } from "vue";
import { useRouter } from "vue-router";
import { setSessionStorage } from "../common.js";

const router = useRouter();
const axios = inject("axios");

const supervisorForm = reactive({
  telId: "",
  password: "",
});

// 控制弹窗显示状态
const showEcoKnowledge = ref(false);

// 环保知识数据库
const ecoKnowledgeDatabase = [
  // 垃圾分类类
  {
    category: "垃圾分类",
    title: "可回收物的价值",
    content: "回收1吨废纸可再造出800公斤好纸，可以挽救17棵大树；回收1吨塑料饮料瓶可获得0.7吨二级原料；回收1吨废钢铁可炼好钢0.9吨。"
  },
  {
    category: "垃圾分类",
    title: "厨余垃圾的处理",
    content: "厨余垃圾经过处理后可以转化为有机肥料，用于农业生产。1吨厨余垃圾可生产0.3吨有机肥料，减少化肥使用量，改善土壤质量。"
  },
  {
    category: "垃圾分类",
    title: "有害垃圾的危害",
    content: "一节一号电池烂在地里，能使1平方米的土壤永久失去利用价值；一粒纽扣电池可使600吨水受到污染，相当于一个人一生的饮水量。"
  },
  {
    category: "垃圾分类",
    title: "电子垃圾的处理",
    content: "电子垃圾中含有大量的重金属和有害物质，如铅、汞、镉等。不正确的处理方式会导致这些物质进入土壤和水源，对环境和人体健康造成严重危害。"
  },
  {
    category: "垃圾分类",
    title: "衣物回收的意义",
    content: "全球每年产生约9200万吨纺织废料，其中只有不到1%被回收制成新衣物。回收旧衣物不仅可以减少垃圾填埋和焚烧，还能节约水资源和能源。"
  },

  // 节能减排类
  {
    category: "节能减排",
    title: "空调温度的设置",
    content: "夏季空调温度每调高1℃，可降低8%的电力负荷；冬季空调温度每调低1℃，可节约10%的能源。将空调设置在26℃左右，既能保证舒适度，又能节约能源。"
  },
  {
    category: "节能减排",
    title: "绿色出行的选择",
    content: "骑自行车或步行1公里，可以减少约0.2公斤的碳排放；乘坐公共交通出行1公里，可减少约0.1公斤的碳排放；相比之下，私家车每行驶1公里约排放0.27公斤的二氧化碳。"
  },
  {
    category: "节能减排",
    title: "LED灯的优势",
    content: "LED灯比传统白炽灯节能80%以上，寿命是白炽灯的10倍以上。如果全国使用12亿支LED灯，一年可节电858.48亿度，相当于节约标准煤3433.92万吨。"
  },
  {
    category: "节能减排",
    title: "节约用水的小窍门",
    content: "用洗菜水、淘米水浇花，可节约用水；缩短洗澡时间1分钟，可节约2-4升水；使用节水型马桶，每次可节约4-6升水。"
  },
  {
    category: "节能减排",
    title: "节约用电的习惯",
    content: "电器不用时拔掉插头，可避免待机耗电；电视机音量和亮度调至适中，可减少耗电量；使用节能型电器，如冰箱、洗衣机等，可降低能源消耗。"
  },

  // 自然保护类
  {
    category: "自然保护",
    title: "森林的作用",
    content: "森林是地球之肺，每公顷森林每天可吸收1吨二氧化碳，释放0.73吨氧气。全球森林面积正以每年约1300万公顷的速度减少，相当于每分钟消失20个足球场大小的森林。"
  },
  {
    category: "自然保护",
    title: "海洋塑料污染",
    content: "全球每年有超过800万吨塑料垃圾进入海洋，这些塑料需要数百年才能分解。海洋中的塑料垃圾会被鱼类和其他海洋生物误食，导致它们死亡或生病。"
  },
  {
    category: "自然保护",
    title: "生物多样性的重要性",
    content: "生物多样性是地球上生命经过几十亿年发展进化的结果，是人类赖以生存的物质基础。每消失一种植物，就会有10-30种依附于它的其他生物随之消失。"
  },
  {
    category: "自然保护",
    title: "湿地的功能",
    content: "湿地是地球之肾，具有净化水质、调节气候、防洪抗旱、保护生物多样性等多种功能。全球湿地面积正以每年约1%的速度减少，湿地保护迫在眉睫。"
  },
  {
    category: "自然保护",
    title: "气候变化的影响",
    content: "全球气候变暖导致冰川融化、海平面上升、极端天气事件增加等。如果不采取有效措施，到2100年，全球平均气温可能上升1.5-4.5℃，对人类生存和发展构成严重威胁。"
  },

  // 环保行动类
  {
    category: "环保行动",
    title: "减少一次性用品的使用",
    content: "全球每年约有5万亿个塑料袋被使用，其中只有不到5%被回收利用。减少使用一次性塑料袋、餐具、吸管等，可以有效减少塑料污染。"
  },
  {
    category: "环保行动",
    title: "绿色消费的选择",
    content: "购买有机食品、本地当季食品、可持续生产的产品等，可以减少农业生产中的化学农药和化肥使用，降低碳排放。"
  },
  {
    category: "环保行动",
    title: "植树造林的意义",
    content: "一棵树每年可以吸收约18公斤的二氧化碳，释放约12公斤的氧气。每个人每年种一棵树，全球每年可吸收约78亿吨的二氧化碳。"
  },
  {
    category: "环保行动",
    title: "参与环保志愿活动",
    content: "参加垃圾分类宣传、河流清理、植树造林等环保志愿活动，不仅可以为保护环境做出贡献，还能增强环保意识，带动更多人参与环保行动。"
  },
  {
    category: "环保行动",
    title: "支持环保组织",
    content: "通过捐款、志愿者服务等方式支持环保组织的工作，如世界自然基金会(WWF)、绿色和平组织(Greenpeace)、自然之友等，共同推动全球环境保护事业的发展。"
  }
];

// 当前显示的知识项
const currentKnowledgeItems = ref([]);

// 随机选择知识项
const selectRandomKnowledge = () => {
  // 确保至少有3条知识项
  const count = Math.min(3, ecoKnowledgeDatabase.length);
  const selected = [];

  // 复制数组以避免修改原始数据
  const availableItems = [...ecoKnowledgeDatabase];

  // 随机选择指定数量的知识项
  for (let i = 0; i < count; i++) {
    if (availableItems.length === 0) break;

    const randomIndex = Math.floor(Math.random() * availableItems.length);
    selected.push(availableItems[randomIndex]);
    availableItems.splice(randomIndex, 1);
  }

  return selected;
};

// 打开环保知识弹窗并更新内容
const openEcoKnowledge = () => {
  // 更新知识内容
  currentKnowledgeItems.value = selectRandomKnowledge();
  // 显示弹窗
  showEcoKnowledge.value = true;
};

const toRegister = () => {
  router.push("/register");
};

const login = () => {
  //表单验证
  if (supervisorForm.telId == "") {
    alert("电话号码不能为空！");
    return;
  }
  if (supervisorForm.telId.length != 11) {
    alert("电话号码必须为11位长度！");
    return;
  }
  if (isNaN(supervisorForm.telId)) {
    alert("电话号码必须由数字组成！");
    return;
  }
  if (supervisorForm.password == "") {
    alert("密码不能为空！");
    return;
  }

  axios
      .post("supervisor/getSupervisorByIdByPass", supervisorForm)
      .then((response)=>{
        if(response.data!=''){
          setSessionStorage('supervisor',response.data);
          router.push('/selectGrid');
        }else{
          alert('手机号码或密码输入不正确！');
        }
      })
      .catch((error)=>{
        console.log(error);
      });
};
</script>

<style scoped>
/* 页面布局 */
.wrapper {
  min-height: 100vh;
  /* 替换为背景图配置 */
  background: url('../assets/hjbh.jpg') no-repeat center center / cover;
  font-family: 'PingFang SC', sans-serif;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0 20px;
  min-height: 100vh;
  max-width: 428px; /* 限制最大宽度为常见手机尺寸（如 iPhone 14 Pro Max 宽度） */
  margin: 0 auto;
  /* 若之前有 max-width 等限制，保持不变 */
  position: relative;
}

/* 头部样式 */
.header-section {
  text-align: center;
  margin-bottom: 40px;
}
.login-title {
  font-size: 40px;
  font-weight: 600;
  margin: 0;

  color: #333;
  background: linear-gradient(135deg, #000000 0%, #e6e6e6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;

  text-shadow:
      1px 1px 1px rgba(255, 255, 255, 0.8),
      -1px -1px 1px rgba(0, 0, 0, 0.2);
}
.welcome-text {
  font-size: 40px;
  font-weight: 600;
  margin: 0;

  color: #333;
  background: linear-gradient(135deg, #000000 0%, #e6e6e6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;

  text-shadow:
      1px 1px 1px rgba(255, 255, 255, 0.8),
      -1px -1px 1px rgba(0, 0, 0, 0.2);
}

/* 登录卡片 */
.login-card {
  width: 100%;
  max-width: 360px;
  background: rgba(255,255,255,0.9);
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
  padding: 40px;
}

/* 输入组样式 */
.input-group {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
  border-bottom: 1px solid #e5e5e5;
  padding-bottom: 8px;
}
.input-icon {
  color: #999;
  font-size: 16px;
  margin-right: 12px;
}
.form-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 14px;
  color: #333;
}

/* 记住密码行 */
.remember-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  font-size: 14px;
}
.remember-label {
  display: flex;
  align-items: center;
  color: #666;
}
.remember-label input {
  margin-right: 6px;
  accent-color: #000;
}
.forgot-link {
  color: #999;
  text-decoration: none;
}
.forgot-link:hover {
  text-decoration: underline;
}

/* 登录按钮 */
.login-btn {
  width: 100%;
  padding: 12px;
  background: #000;
  color: #fff;
  border: none;
  border-radius: 25px;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.3s;
}
.login-btn:hover {
  background: #333;
}

/* 注册引导 */
.register-guide {
  text-align: center;
  margin-top: 20px;
  font-size: 14px;
  color: #666;
}
.register-guide a {
  color: #000;
  text-decoration: none;
  font-weight: 500;
}
.register-guide a:hover {
  text-decoration: underline;
}

/* 环保知识按钮样式 */
.eco-knowledge-btn {
  position: absolute;
  bottom: 30px;
  right: 30px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #009688;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  z-index: 10;
  transition: all 0.3s ease;
  padding: 8px;
  text-align: center;
  font-size: 12px;
  line-height: 1.2;
}

.eco-knowledge-btn:hover {
  transform: scale(1.05);
  background-color: #00796b;
}

.eco-knowledge-btn i {
  font-size: 20px;
}

/* 环保知识弹窗样式 */
.eco-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
}

.modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px);
  cursor: pointer;
}

.modal-content {
  position: relative;
  width: 90%;
  max-width: 400px;
  max-height: 80vh;
  background-color: white;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  z-index: 1;
  animation: fadeIn 0.3s ease-out;
}

.modal-header {
  padding: 16px 20px;
  background-color: #009688;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.modal-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
}

.close-btn {
  background: none;
  border: none;
  color: white;
  font-size: 18px;
  cursor: pointer;
  opacity: 0.8;
  transition: opacity 0.2s;
}

.close-btn:hover {
  opacity: 1;
}

.modal-body {
  padding: 20px;
  max-height: calc(80vh - 60px);
  overflow-y: auto;
}

.knowledge-item {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #eee;
  animation: slideUp 0.5s ease-out;
}

.knowledge-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.knowledge-item h4 {
  color: #009688;
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 16px;
}

.knowledge-item p {
  color: #666;
  line-height: 1.6;
  margin: 0;
}

.tip-text {
  margin-top: 20px;
  padding-top: 15px;
  border-top: 1px solid #eee;
  text-align: center;
}

.tip-text p {
  color: #999;
  font-size: 13px;
  margin: 0;
}

/* 弹窗动画 */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 知识项滑入动画 */
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
</style>

